<template>
  <el-form ref="bookForm" :model="bookForm" label-width="7em" label-position="left">
    <el-row type="flex" justify="space-around">
      <el-col :span="20">
        <el-form-item label="会议室编号:" class="room">
          <el-input v-model="bookForm.room" readonly placeholder="请选择会议室" style="width: 30%" />
          <el-button type="primary" style="margin-left: 3em;" @click="dialogTableVisible = true">
            查看会议室
          </el-button>
          <el-dialog title="会议室" width="70%"	:visible.sync="dialogTableVisible" append-to-body>
            <el-table :data="rooms" border fit highlight-current-row style="width: 100%;">
              <el-table-column label="会议室编号" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.id }}</span>
                </template>
              </el-table-column>
              <el-table-column label="会议室使用情况" align="center">
                <template slot-scope="scope">
                  <el-popover placement="right" width="600" trigger="click">
                    <el-table :data="usages" border highlight-current-row>
                      <el-table-column label="会议编号" align="center">
                        <template slot-scope="scope_">
                          <span>{{ scope_.row.id }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="会议主题" align="center">
                        <template slot-scope="scope_">
                          <span>{{ scope_.row.theme }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="日期" align="center">
                        <template slot-scope="scope_">
                          <span>{{ scope_.row.date }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="起止时间" align="center">
                        <template slot-scope="scope_">
                          <span>{{ scope_.row.time }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="状态" align="center">
                        <template slot-scope="scope_">
                          <span>{{ scope_.row.state }}</span>
                        </template>
                      </el-table-column>
                    </el-table>
                    <el-button slot="reference" type="text" @click="handleInfo(scope.$index, scope.row)">
                      点击查看详情
                    </el-button>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column label="会议室大小" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.size }}</span>
                </template>
              </el-table-column>
              <el-table-column label="多媒体设备" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.media ? '有' : '无' }}</span>
                </template>
              </el-table-column>
              <el-table-column label="空调" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.airconditioner ? '有' : '无' }}</span>
                </template>
              </el-table-column>
              <el-table-column label="楼层" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.floor }}楼</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button type="primary" size="mini" @click="handleSelect(scope.$index,scope.row)">
                    选择
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-dialog>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-around">
      <el-col :span="8">
        <el-form-item label="会议开始时间:">
          <el-date-picker v-model="bookForm.starttime" type="datetime" placeholder="请选择日期" prefix-icon="el-icon-date" :picker-options="pickerOption" style="width: 100%;" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="会议时长:">
          <el-input v-model="bookForm.size" placeholder="请输入会议时长" type="number">
            <template slot="append">
              分钟
            </template>
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-around">
      <el-col :span="8">
        <el-form-item label="会议人数:">
          <el-input v-model="bookForm.expectsize" type="number" placeholder="请输入会议人数" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="会议主题:">
          <el-input v-model="bookForm.theme" placeholder="请输入会议主题" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-around">
      <el-col :span="8" style="display: flex;">
        <el-checkbox v-model="bookForm.attendance" :true-label="1" :false-label="0">
          会议需要签到
        </el-checkbox>
        <el-checkbox v-model="bookForm.invite" :true-label="1" :false-label="0">
          允许成员邀请成员
        </el-checkbox>
      </el-col>
      <el-col :span="8" />
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :span="6">
        <el-button type="primary" style="width: 100%;font-size: 20px;letter-spacing: 2em;" @click="handleBook">
          提<span style="letter-spacing: 0;">
            交
          </span>
        </el-button>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { bookMeetingRoom, checkUsage } from '@/api/meeting'
import { findAllRoom } from '@/api/room'
import { parseTime } from '@/utils'

export default {
  name: 'Room',
  data() {
    return {
      rooms: [],
      usages: [],
      dialogTableVisible: false,
      bookForm: {
        theme: '',
        expectsize: undefined,
        starttime: '',
        endtime: '',
        room: '',
        attendance: 0,
        invite: 0,
        size: undefined
      },
      pickerOption: {
        disabledDate: this.disabledDate
      }
    }
  },
  created() {
    this.getRoom()
  },
  methods: {
    async getRoom() {
      const res = await findAllRoom()
      this.rooms = res.data.data
    },
    async handleInfo(index, row) {
      const res = await checkUsage(row.id)
      this.usages = res.data.data.content
      if (this.usages) this.filterData()
    },
    handleSelect(index, row) {
      this.bookForm.room = row.id
      this.dialogTableVisible = false
    },
    filterData() {
      this.usages.forEach(data => {
        // console.log(`data:`, data)
        this.transformState(data)
        data.date = parseTime(data.starttime, '{y}-{m}-{d}')
        data.time = `${parseTime(data.starttime, '{h}:{i}')}-${parseTime(data.endtime, '{h}:{i}')}`
        // console.log(`data:`, data)
      })
    },
    transformState(data) {
      switch (data.state) {
        case -1:
          data.state = '正在审核'
          break
        case 0:
          data.state = '审核通过'
          break
        case -2:
          data.state = '审核未通过'
          break
        default:
          data.state = '安排中'
          break
      }
    },
    disabledDate(date) {
      const d = date.getTime()
      const now = new Date().getTime()
      return d < now - 24 * 60 * 60 * 1000 || d > now + 10 * 24 * 60 * 60 * 1000
    },
    async handleBook() {
      const meeting = {}
      Object.assign(meeting, this.bookForm)
      meeting.starttime /= 1000
      meeting.endtime = meeting.starttime + meeting.size * 60
      const res = await bookMeetingRoom(meeting)
      if (!res.data.code) {
        this.$notify({
          title: '成功',
          message: '预约成功',
          type: 'success',
          duration: 2000
        })
        this.$refs.bookForm.resetFields()
      } else {
        this.$notify({
          title: '失败',
          message: res.data.msg,
          type: 'error',
          duration: 2000
        })
      }
    }
  }
}
</script>

<style scoped>
.el-form {
  margin-top: 30px;
  height: 80%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.el-form-item >>> label,
.el-checkbox >>> .el-checkbox__label,
.el-form-item >>> .el-form-item__content
 {
   font-size: 20px;
}

.el-form-item >>> .el-input,
{
  font-size: 18px;
}

.el-col >>> .el-checkbox {
  font-weight: 400;
}

.room >>> .el-form-item__content {
  display: flex;
}
</style>
